<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <include file="Public:resource"/>
    <title>账号绑定</title>
</head>
<body>

<div class="container">
    <include file="Public:top" title="账号绑定"/>
    <empty name="relevanceModel">
        <div class="row" style="margin-top: 50px;">
            <div class="col-xs-12 col-sm-12 col-mg-12 col-md-12" style="font-size: medium;" align="center">
                您尚未绑定任何水费账号
            </div>
        </div>
        <div class="row" style="margin-top: 20px;">

            <div><input type="button" class="btn btn-lg btn-block"
                        style="background-color: #6bd1a2;color:white;height: 46px;"
                        onclick="onBind() " value="立即绑定"/>
            </div>
            <else/>

            <div class="row" style="margin:10px;">

                <div><input type="button" class="btn btn-lg btn-block"
                            style="background-color: #6bd1a2;color:white;height: 46px;"
                            onclick="onBind() " value="新增账号"/>
                </div>

            </div>
            <include file="Public:bar" text="已绑定的账号"/>

            <foreach name="relevanceModel" item="relevance">
                <div class="row" style="border-bottom: darkgray solid 1px;padding-bottom: 5px;margin-bottom: 10px;"
                     id="{$relevance.id}-container">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="row" style="margin-top: 5px;">
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 align-to-input" style="font-size: medium"
                                 align="left">
                                水费账号
                            </div>
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                <input type="text" value="{$relevance.userid}" readonly>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 5px;">
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 align-to-input" align="left"
                                 style="font-size: medium">
                                姓名
                            </div>
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                <input type="text" value="{$relevance.name}" readonly>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 5px;">
                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 align-to-input" align="left"
                                 style="font-size: medium">
                                证件号
                            </div>
                            <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                                <input type="text" value="{$relevance.idnumber}" readonly>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-xs-12 col-md-12 col-sm-12 col-lg-12">
                                <input type="button" class="btn btn-lg btn-block jss-button"style="background-color: firebrick"
                                            onclick="onDelete('{$relevance.id}') " value="删除"/>
                            </div>
                        </div>
                    </div>
                </div>
            </foreach>
    </empty>
    <include file="Public:progress" hint="正在删除..."/>
    <include file="Public:message"/>
</div>

<script>
    //删除
    function onDelete(id) {
        if (!confirm("确定删除该账号?")) {
            return;
        }
        showProgress();
        var param = {
            id: id
        };
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: "{:U('Bind/delete')}",
            data: param,
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            success: function (json) {
                hideProgress();
                if (json.status == 'success') {
                    showMessage(json.msg, 2000);
                    //todo 隐藏元素
                    $("#" + id + "-container").css("display", "none");
                } else {
                    alert(json.msg);
                }
            },
            error: function (msg) {
                hideProgress();
                alert("删除失败,请检查网络!");
            }
        })
    }

    //点击绑定
    function onBind() {
        window.location.href = "{:U('Bind/add')}";
    }
</script>
</body>
</html>